<template>
	<!-- 不能使用微信原生api -->
	<view class="">
		
		<view class="content">
			<view class="header" >
				<text decode="true">全部任务</text> 
				<u-icon class="right" name="arrow-down-fill" color="rgb(29, 29, 29)" size="8"></u-icon>
				<button class="right_2 cu-btn bg-blue round shadow" @click="assignTask">分配任务</button>
			</view>
			<text class="text-left">160 项笔记</text>
		</view>
		
		<!-- 搜索框，无论什么组件，给他包一层，让他改变 -->
		<view class="serch_board">
			<u-search shape="round" height="70" :show-action="true" :animation="true"
			   @custom="doSearch" @search="doSearch" v-model="keyword" bgColor=" #FFFFFF"></u-search>
		</view>
		
		<view class="content" v-for="(item,index) in items" :key="index" :data-index="index" @click='showDetail(e)'>
			<uni-swipe-action>
			    <!-- 这种是最常用的 -->
			     <uni-swipe-action-item :right-options="options"  @change="swipeChange($event, index)">
			            <view>
			            	<view class="cu-bar">
			            		<view class="action sub-title">
			            			<text class="text-xl text-bold text-blue">具体时分</text>
			            			<text class="text-ABC text-blue">Personal</text>
			            		</view>
			            	</view>
			            	
			            	<view class="view_3">
			            		<text>具体内容</text>
			            	</view>
			            </view>
			    </uni-swipe-action-item>
			</uni-swipe-action>
		</view> 
		<!-- 小程序的text能识别\n -->
		<view>
			 <movable-area class="movable-area">
			    <movable-view class="movable-view" direction="all">
					<view class="footer cu-btn bg-blue round  shadow" @click="toCreateTask">
						<view class="myfooter">+</view>
						<view class="myfooter">新建</view>
					</view>
			    </movable-view>
			  </movable-area>
		</view>
	
	</view>
</template>
<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				
			   items: [
					 { message: 'Foo' },
					 { message: 'Bar' }
			    ],
				show: false,
				keyword: '',
				options:[
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}
				],
			}				
		},
		
		onLoad: function () {
			console.log('onLoad') 
		},
		
		methods: {
			doSearch() {
				console.log("我是doSearch方法")
			},
			
			click() {
				console.log('Cell is clicked.');
			},
			
			assignTask() {
				//跳转到preview界面
				wx.navigateTo({
						url: "../../page_taskDetails/assignTask/assignTask"
					})
			},
			
			//点击删除按钮事件
			delItem(e) {
			  let that = this;
			  that.csListArrl.splice(e.data.index, 1);
			},
			
			showDetail(e) {
				//不能用于tabBar页面
				console.log("我是详情页")
				wx.navigateTo({
						url: "../../page_taskDetails/taskDetails/taskDetails"
					})
				
			},
			toCreateTask(e) {
				//不能用于tabBar页面
				console.log("我是创建页")
				wx.navigateTo({
						url: "../../page_createTask/createTask/createTask"
					})
				
			},
			onClick(e){
			  console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			},
			swipeChange(e,index){
			  console.log('当前状态：' + '，下标：' + index)
			}
		
	}
}
</script>

<style lang="scss" >
	
	.content {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin: 20upx ;
		margin-left: 50upx;
		padding-left: 0upx;
		width: 640rpx;
		border-radius: 15upx;
		z-index: 50;
		
		.right_2 {
			margin-left: 200rpx;
			margin-top: 20rpx;
			height: 60rpx;
			font-size: 35rpx;
		}
		
		.text-left {
			margin-top: -15rpx;
		}
		
	}
	
	
	
	.serch_board {
		margin-top: 40rpx;
		margin-left: 50upx;
		width: 85vw;
	}	

	.header {
		display: flex;
		flex-direction: row;
		font-size: 50rpx;
	}
	
	.view_3 {
		padding-left: 40rpx;
		width: 100vw;
		height: 60upx;
	}
	
	.footer {
		display: flex;
		flex-direction: column;
		width: 90rpx;
		height: 90rpx ;
		bottom: 40rpx;
		margin-left: 45%;
	}
	
	.myfooter {
		font-size: 30rpx;
	}
	
	.movable-area{
	    pointer-events:none;// 这个属性设置为none,让所有事件穿透过去
	    z-index: 100;
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	  }
	  
	  // 设置可以活动的范围
	  .movable-view { 
	  	pointer-events:auto;// 重设为auto,覆盖父属性设置
	    height: 80rpx;
	    width: 100rpx;
		top: 85%;
		left: 40%;
	  }
	
	.cell-page {
		padding-bottom: 20px;
	}

	.cell-box {
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin: 20px 0px 0px 15px;
		}

		&__block {
			// background-color: #fff;
			margin-top: 20px;
		}
	}

	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}

	.u-cell-text {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
		margin-right: 5px;
	}

	.u-slot-value {
		line-height: 17px;
		text-align: center;
		font-size: 10px;
		padding: 0 5px;
		height: 17px;
		color: #FFFFFF;
		border-radius: 100px;
		background-color: #f56c6c;
	}
</style>
